<!DOCTYPE html>
<html lang="ZH-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>投票（自定义属性）</title>
    <style>
        .wrapper {
            width: 1200px;
            margin: 0 auto;
        }
        .wrapper  > div {
            width: 200px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            border: 1px solid #000;
            float: left;
            margin-left: 50px;
            cursor: pointer;
        }
        h3 {
            text-align: center;
        }

        body {
            /* 禁止选中文本 */
            user-select: none;
        }
    </style>
</head>
<body>
    <h3>上半年-技术小组投票（2）</h3>
    <div class="wrapper">
        <div class="item first">第一组 <span>（ 0 ）</span></div>
        <div class="item second">第二组 <span>（ 0 ）</span></div>
        <div class="item third">第三组 <span>（ 0 ）</span></div>
        <div class="item fourth">第四组 <span>（ 0 ）</span></div>
    </div>

    <script>
        // 需求：
            // 1、点击小组进行投票
            // 2、每个小组票数是独立的，随着点击次数增加票数(+1)


        // 思考：
            // 需要控制哪些元素
            // 控制元素的什么内容（文本）

        // data-count 自定义属性：
             // 步骤：1、2、3、


        // 编码：
            // 1、获取元素
            // var divItems = document.querySelectorAll(".item");
            // // 2、循环标签数组 绑定事件
            // for(var i = 0 ; i < divItems.length ; i ++){
            //     // 每循环用一次就添加自定义属性
            //     divItems[i].setAttribute("data-count",0);
            //     // 绑定事件
            //     divItems[i].onclick = function(){
            //         // 通过this找出事件调用者
            //         var count = this.getAttribute("data-count");
            //         // 转数字类型
            //         count = count - 0;
            //         // console.log(typeof count);
            //         // 自增
            //         count++;
            //         // 填充文本
            //         this.children[0].innerText = "（ "+count+" ）";
            //         // 给自定义属性赋值
            //         this.setAttribute("data-count",count);
            //     }
            // }

            var divItems = document.querySelectorAll(".item");
            for( var i = 0 ; i < divItems.length ; i ++) {
                divItems[i].setAttribute("data-count" , 0);
                divItems[i].onclick = function () {
                    var count = this.getAttribute("data-count");
                    count = count - 0 ;
                    count ++;
                    this.children[0].innerHTML = "("+count+")";
                    this.setAttribute("data-count" , count);
                }
            }

        
  
    </script>
</body>
</html>